<template>
	<div class="shopCar">
		<div class="d-flex" >
			<div style="flex: 1;">
				<div @click="toggalshowCart" class="totalPrice">￥{{totalPrice}}元</div>
				<div>配送费：￥{{merchantInfo.deliveryPrice}}</div>
			</div>
			<div class="payJs" :class="payClass">{{payText}}</div>
		</div>
		<div class="list-content" v-show="showCart">
			<div class="title">
				<div>购物车</div>
				<div @click="toggalshowCart">关闭</div>
			</div>
			<div class="empty" v-if="!cartFoods.length">购物车还没有任何商品，赶紧去添加吧</div>
			<div class="cartfooditem" v-for="(food,index) in cartFoods" :key="index">
				<div class="name">{{food.name}}</div>
				<CarCotrol :food="food" />
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import CarCotrol from './carCotrol.vue'
	export default {
    data() {
        return {
            showCart: false
        };
    },
    methods: {
        toggalshowCart() {
            this.showCart = !this.showCart;
        }
    },
    computed: {
        ...mapState(["cartFoods", "merchantInfo"]),
        ...mapGetters(["totalPrice", "totalCount"]),
        payText() {
            const { totalPrice } = this;
            const { minPrice } = this.merchantInfo;
            if (totalPrice == 0) {
                return "￥20元起送";
            }
            else if (totalPrice < minPrice) {
                return `还差${minPrice - totalPrice}起送`;
            }
            else {
                return "去结算";
            }
        },
        payClass() {
            const { totalPrice } = this;
            const { minPrice } = this.merchantInfo;
            return totalPrice >= minPrice ? "enough" : "not-enough";
        }
    },
    mounted() {
    },
    components: { CarCotrol }
}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
.shopCar {
	.totalPrice {
		font-weight: bold;
	}
	user-select: none;
	position: fixed;
	bottom: 0;
	padding-left: 20px;
	left: 0;
	right: 0;
	height: 50px;
	background-color: #131A23;
	color: #fff;
	.d-flex {
		display: flex;
		height: 100%;
		font-size: .9em;
		justify-content: space-between;
		align-items: center;
		.payJs {
			width: 8em;
			height: 100%;
			line-height: 50px;
			text-align: center;
			background-color: #000;
			&.enough {
				background-color: $lightGreen;
				color: #fff;
			}
		}
	}
	.list-content {
		position: absolute;
		bottom: 50px;
		left: 0;
		right: 0;
		background-color: #fff;
		color: #000;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: .9em;
			padding: 5px 10px;
			background-color: $lightGreen;
			color: #fff;
		}
		.empty {
			text-align: center;
			font-size: .9em;
			padding: 10px 15px;
		}
		.cartfooditem {
			padding: 5px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cartControl {
				display: flex;
				align-items: center;
				>span {
					margin: 0 5px;
				}
				.control {
					width: 20px;
					height: 20px;
					background-color: $themeColor;
					text-align: center;
					color: #fff;
					line-height: 20px;
					border-radius: 50px;
				}
			}
		}
	}
}
</style>